<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>combination</title>
    <style>
        
    </style>
</head>
<body>
    <div id="e-focus">
        <input v-focus>
    </div>

    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    



<script src="js/vue.js"></script>
<script>
    //定义一个混入对象
    var myMixin = {
        created: function() {
            this.hello()
        },
        methods:{
            hello:function(){
                console.log('hello from mixin!')
            }
        }
    }

    //定义一个使用混入对象的组件
    // var Compontent = Vue.extend({
    //     mixins: [myMixin]
    // })
    // var component = new Compontent();

    // var mixin = {
    //     data: function() {
    //         return {
    //             message:'hello',
    //             foo:'abc'
    //         }
    //     }
    // }

    // new Vue({
    //     mixins:[mixin],
    //     data:function() {
    //         return {
    //             message:'goodbye',
    //             bar:'def'
    //         }
    //     },
    //     created:function() {
    //         console.log(this.$data)
    //     }
    // })

    // var mixin = {
    //     created: function () {
    //         console.log('混入对象的钩子被调用')
    //     }
    // }

    // new Vue({
    //     mixins: [mixin],
    //     created: function () {
    //         console.log('组件钩子被调用')
    //     }
    // })

// => "混入对象的钩子被调用"
// => "组件钩子被调用"
    
    var mixin = {
        methods: {
            foo: function () {
                console.log('foo')
            },
            conflicting: function () {
                console.log('from mixin')
            }
        }
    }

    var vm = new Vue({
        mixins: [mixin],
        methods: {
            bar: function () {
                console.log('bar')
            },
            conflicting: function () {
                console.log('from self')
            }
        }
    })

    vm.foo() // => "foo"
    vm.bar() // => "bar"
    vm.conflicting() // => "from self"

    // 为自定义的选项 'myOption' 注入一个处理器。
    Vue.mixin({
        created: function () {
            var myOption = this.$options.myOption
            if (myOption) {
                console.log(myOption)
            }
        }
    })

    new Vue({
        myOption: 'hello!'
    })
    // => "hello!"

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
    
    new Vue({
        el:"#e-focus",
    })
    // directives: {
    //     focus: {
    //         // 指令的定义
    //         inserted: function (el) {
    //             el.focus()
    //         }
    //     }
    // }

    Vue.directive('demo',{
        bind:function(el,binding,vnode) {
            var s = JSON.stringify;
            el.innerHTML = 
                'name:' + s(binding.name) + '<br>' +
                'value:' + s(binding.value) + '<br>' +
                'expression:' + s(binding.expression) + '<br>' +
                'argument:' + s(binding.arg) + '<br>' +
                'modifiers:' + s(binding.modifiers) + '<br>' +
                'vnode keys:' + Object.keys(vnode).join(', ');
        }
    })

    new Vue({
        el:"#hook-arguments-example",
        data:{
            message: 'hello!'
        }
    })

    Vue.config.optionMergeStrategies._my_option = function(parent,child,vm){
        return child + 1
    }

    const Profile = Vue.extend({
        _my_option:1
    })
</script>
</body>
</html>